<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('风机矩阵')" />
    <script
      src="/js/echarts.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="/js/jquery-2.0.0.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="/js/bootstrap.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="/js/bootstrap-paginator.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <style type="text/css">
      .echarts {
        width: 360px;
        height: 360px;
      }

      .col-md-5ths {
        padding: 1px;
      }

      .row {
        padding: 5px;
      }

      .matrix {
        padding: 5px 5px 5px 5px;
      }

      #div1 {
        margin: 1 1 1 1;
      }

      .ibox {
        margin: 0 0 10px;
      }

      .fname {
        font-size: 8px;
      }

      .fvalue {
        font-size: 8px;
        color: blue;
      }

      .funit {
        font-size: 8px;
        font-style: oblique;
        color: #f07f39;
      }

      tbody > tr:hover {
        background-color: wheat !important;
      }

      tbody > tr td {
        padding: 1px;
      }
    </style>
  </head>
  <body class="gray-bg">
    <!--	<th:block th:include="include :: datatotal" />-->

    <div id="div1">在这里</div>
    <!--  
		<div class="pull-right pagination"><ul id="page"></ul></div>
		-->

    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
      /*     var json11 = {
    		"direction": 0,
    		"params": '',
    		"windSpeed": 0,
    		"test":111,
    		}; */
      function pagehtml(pageNum) {
        if (pageNum == 0) {
          pageNum = 1;
        } else {
          pageNum = pageNum;
        }

        $.ajax({

          url: ctx + "windpower/fanmatrix/list",
          type: "POST",
          data: {
            pageSize: 9999,
            pageNum: pageNum,
          },
          async: false,
          success: function (data) {
            // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
            $("#div1").empty();
            for (i = 0; i < data.rows.length; i++) {
              if (i % 5 == 0 && i > 4) {
                $("#div1").append("</div>");
                $("#div1").append("<div class='row'>");
              }
              if (i == 0) {
                $("#div1").append("<div class='row'>");
              }
              var row = data.rows[i];
              var img = "/img/fan_fail.png";
              var color = "#f00;";
              var status = "故障";

              if (row.status == 1) {
                img = "/img/fan.gif";
                color = "#30b60e;";
                status = "运行中";
              } else if (row.status == 0) {
                img = "/img/fan_stop.png";
                color = "#444444;";
                status = "停止";
              } else {
                img = "/img/fan_fail.png";
                color = "#f00;";
                status = "故障";
              }

              var instantaneousPower =
                row.status == 1 ? row.instantaneousPower : "--";
              var rotateSpeed = row.status == 1 ? row.rotateSpeed : "--";

              var options = {
                alignment: "center", //居中显示
                currentPage: pageNum, //当前页数
                totalPages: Math.ceil(data.total / 2), //总页数 注意不是总条数,
                bootstrapMajorVersion: 3,
                pageUrl: function (type, page, current) {
                  if (page == current) {
                    return "javascript:void(0)";
                  } else {
                    return "javascript:pagehtml(" + page + ")";
                  }
                },
              };

              $("#div1").append(
                "\n" +
                  "                <div class='col-md-5ths'>\n" +
                  "                <div class='ibox '>\n" +
                  "                <div class='ibox-title'>\n" +
                  "                <h5 class='dayDetailedBtn'>风机: <b class='fan_code'>" +
                  row.fanCode +
                  "</b></h5>\n" +
                  "<div class='ibox-tools'>\n" +
                  "	<a class='close-link'>\n" +
                  "    	<em class='em_status'>" +
                  status +
                  "</em> <i class='fa fa-lightbulb-o' style='color:" +
                  color +
                  "'></i>\n" +
                  "	</a>\n" +
                  "</div>\n" +
                  "            </div>\n" +
                  "            <div class='ibox-content matrix'>\n" +
                  "                <div class='media'>\n" +
                  "\n" +
                  "                <a class='media-left' href='faninfo?fanId=" +
                  row.id +
                  "'>\n" +
                  "                <img src='" +
                  img +
                  "' alt='' style='max-height: 115px; max-width: 80px;' >\n" +
                  "                </a>\n" +
                  "\n" +
                  "                <div class='media-right'>\n" +
                  "                <table><tbody>\n" +
                  "                <tr>\n" +
                  "                <td class='fname'>\n" +
                  "                	功率：\n" +
                  "                </td>\n" +
                  "            	 <td class='fvalue'>\n" +
                  "                <em>" +
                  row.power +
                  "</em>\n" +
                  "                </td>\n" +
                  "            	 <td class='funit'>\n" +
                  "                <em> kw </em>\n" +
                  "                </td>\n" +
                  "                </tr>\n" +
                  "                <tr>\n" +
                  "                <td class='fname'>\n" +
                  "                	实际功率：\n" +
                  "                </td>\n" +
                  "            <td class='fvalue'>\n" +
                  "                <em>" +
                  row.realPower +
                  "</em>\n" +
                  "                </td>\n" +
                  "            	 <td class='funit'>\n" +
                  "                <em> kw </em>\n" +
                  "                </td>\n" +
                  "                </tr>\n" +
                  "                <tr>\n" +
                  "                <td class='fname'>\n" +
                  "               	 瞬时功率：\n" +
                  "                </td>\n" +
                  "            <td class='fvalue'>\n" +
                  "                <em class='em_instantaneousPower'>" +
                  instantaneousPower +
                  "</em>\n" +
                  "                </td>\n" +
                  "            	 <td class='funit'>\n" +
                  "                <em> kw </em>\n" +
                  "                </td>\n" +
                  "                </tr>\n" +
                  "                <tr>\n" +
                  "                <td class='fname'>\n" +
                  "                	风轮转速：\n" +
                  "                </td>\n" +
                  "            <td class='fvalue'>\n" +
                  "                <em class='em_rotateSpeed'>" +
                  rotateSpeed +
                  "</em>\n" +
                  "                </td>\n" +
                  "            	 <td class='funit'>\n" +
                  "                <em> 转/S </em>\n" +
                  "                </td>\n" +
                  "                </tr>\n" +
                  "                <tr>\n" +
                  "                <td class='fname'>\n" +
                  "                	风速：\n" +
                  "                </td>\n" +
                  "            <td class='fvalue'>\n" +
                  "                <em class='em_windspeed'></em>\n" +
                  "                </td>\n" +
                  "            	 <td class='funit'>\n" +
                  "                <em> M/S </em>\n" +
                  "                </td>\n" +
                  "                </tr>\n" +
                  "                <tr>\n" +
                  "                <td class='fname'>\n" +
                  "                	风向角：\n" +
                  "                </td>\n" +
                  "            <td class='fvalue'>\n" +
                  "                <em class='em_direction'>" +
                  row.direction +
                  "</em>\n" +
                  "                </td>\n" +
                  "            	 <td class='funit'>\n" +
                  "                <em> ° </em>\n" +
                  "                </td>\n" +
                  "                </tr>\n" +
                  "                </tbody>\n" +
                  "                </table>\n" +
                  "                </div>\n" +
                  "                </div>\n" +
                  "                </div>\n" +
                  "                </div>\n" +
                  "                </div>"
              );
            }
            if (i == data.rows.length - 1) {
              $("#div1").append("</div>");
            }
            options1 = {
              currentPage: 1,
              numberOfPages: 5,
              totalPages: 11,
              bootstrapMajorVersion: 3,
            };
            $("#page").bootstrapPaginator(options);
          },
        });
      }
      pagehtml(1);
    </script>
  </body>
</html>
